<template>
	<view>
		<view class="demo-preview">
			 <van-tabs @click="onClick" v-model="active">
			  <van-tab :title="item.title" v-for="item in tabList" >
				<view class="demo-preview-list" v-for="item in resviersVoList" >
				  <view class="demo-content">
					<image style="width: 100rpx;height: 100rpx;float: left;" :src="item.customerHandImage" mode=""></image>
					<h3 style="">{{item.customerNickName}}</h3>
					<p style="color: rgba(151, 149, 149, 100);font-size: 12px;margin-left: 110rpx;">{{item.localReviersTime}}</p>
					<p>{{item.localReviewsTitle}}/{{item.localReviewsText}}</p>
				  </view>
				  <view class="demo-contentImg" v-for="pic in item.pictureList">
					<image style="width: 10rem;height: 10rem;" :src="pic.localPictureUrl" mode=""></image>
				  </view>
				  <view class="demo-primary">
					<van-tag plain type="primary" style="padding: 0.15rem">石家庄同城</van-tag>
					<van-tag plain type="primary" style="padding: 0.15rem">#设计图纸#</van-tag>
				  </view>
				  <view class="demo-contento" style="text-align: right;padding-top: 0.4rem">
					<view class="demo-contento-chat" @click="huiFuSee(item.localReviewsId)">
					  <van-icon name="chat-o" />
					  <span class="demo-contento-chats" style="font-size: 0.8rem">{{item.localReviersReply}}</span>
					</view>
					<view class="demo-contento-like" @click="giveThumbsUp(item.localReviewsId,item.localFabulousStatus)">
					  <van-icon :name="item.localFabulousStatus==1?name1:name"/>
					  <span class="demo-contento-likes" style="font-size: 0.8rem">{{item.localReviersFabulous}}</span>
					</view>
				  </view>
				</view>
			  </van-tab>
			</van-tabs>
			
			<!-- 自定义图标 -->
			 <van-popup v-model="show" closeable close-icon="close" round  position="bottom" :style="{ height: '60%' }">
			  <view class="wrapper" >
				<view class="block">
				  <view class="block-top">
					<p>全部评论{{replyVoList.length}}条</p>
				  </view>
				  <view class="block-list">
					<view class="block-list-demo" v-for="item in replyVoList" :key="item.localReplyId">
					  <img src="https://img.yzcdn.cn/vant/logo.png">
					  <view class="list-demo-content">
						<view>
						  <h3>{{item.customerNickName}}</h3>
						  <p>{{item.localReplyTime}}</p>
						</view>
						<p style="width: 70%;font-size: 0.7rem">{{item.localReplyText}}</p>
					  </view>
					 <!-- <view class="block-list-like">
						<van-icon name="like-o"/>
						<span class="block-list-likes" style="font-size: 0.8rem">{{item.localReplyFabulous}}</span>
					  </view> -->
					</view>
				  </view>
				<view class="block-bottom">
					 <van-cell-group >
					  <van-field
						v-model="localReplyText"
						type="textarea"
						autosize
						left-icon="edit"
						placeholder="评论一下~"
						center
					  >
					  <van-button slot="button" size="small" type="primary" @click="insertLocalReply">
						  发布</van-button>
					  </van-field>
					</van-cell-group>
				  </view>
				</view>
			  </view>
			</van-popup>
		</view>
	</view>
</template>

<script>
	import {Toast} from "vant";
	import {
	    selectLocalReviersList,
	    selectLocalReplyList,
	    addLocalReply,
	    selectReplyVoByRevierwsId,
	    selectResviersVo,
	    localFabulousJia,
	    localFabulousJian,
	    localFabulousJia1,
	    selectResviersByCustomer,
	  } from '../../api/customer/local.js'
	export default {
		data() {
			return {
				active:0,
				tabList:[
				  {title:'全部'},
				  {title:'我的'},
				],
				name: 'like-o',
				name1: 'like',
				show: false,
				localReplyText: '',
				localReviersId : '',
				//全部的发布信息
				resviersVoList:[
					
				],
				//回复列表
				replyVoList:[
								
				],
				//查询发布的参数
				resviersVo:{},
				//点赞中间表数据参数
				localFabulous:{
				  localReviersId:'',
				  localFabulousStatus:'',
				},
				
				
			}
		},
		created(){
		  this.getSelectResviersVo();
		},
		methods: {
			//全部和我的
			onClick(name){
				if(name==0){
				 console.log("全部");
				 this.getSelectResviersVo();
				}else if(name==1){
				  console.log("我的");
				  this.getSelectResviersByCustomer();
				}
				console.log(JSON.stringify(name))
			},
			//查询发布的全部信息
			getSelectResviersVo(){
				selectResviersVo(this.resviersVo).then((res)=>{
				  this.resviersVoList = res.data.data;
				  console.log(JSON.stringify(res));
				})
			},
		   //查询用户发布的全部本地信息
			getSelectResviersByCustomer(){
			  selectResviersByCustomer(this.resviersVo).then((res)=>{
				if(res.data.code==200){
				  this.resviersVoList = res.data.data;
				}
				 console.log(JSON.stringify(res));
			  })
			},
			 // 点赞
			  giveThumbsUp(localReviewsId,localFabulousStatus){
				this.localFabulous.localReviersId = localReviewsId;
				console.log(localReviewsId,localFabulousStatus)
				switch (localFabulousStatus) {
				  case 1:
					this.localFabulous.localFabulousStatus = 0;
					localFabulousJian(this.localFabulous).then((res)=>{
					  if (res.data.code==200){
						if(this.active==0){
						  this.getSelectResviersVo();
						}else if(this.active==1){
						  this.getSelectResviersByCustomer();
						}
					  }
					  console.log(JSON.stringify(res));
					})
					break
				  case 0:
					this.localFabulous.localFabulousStatus = 1;
					localFabulousJia1(this.localFabulous).then((res)=>{
					  if (res.data.code==200){
						if(this.active==0){
						  this.getSelectResviersVo();
						}else if(this.active==1){
						  this.getSelectResviersByCustomer();
						}
					  }
					   console.log(JSON.stringify(res));
					})
					break
				  default:
					this.localFabulous.localFabulousStatus = 1;
					localFabulousJia(this.localFabulous).then((res)=>{
					  if (res.data.code==200){
						if(this.active==0){
						  this.getSelectResviersVo();
						}else if(this.active==1){
						  this.getSelectResviersByCustomer();
						}
					  }
					  console.log(JSON.stringify(res));
					})
					break;
				}
			  },
		    //查看发布信息回复
			 huiFuSee(localReviewsId){
			   this.localReviersId = localReviewsId;
			   this.show = true;
			   selectReplyVoByRevierwsId(localReviewsId).then((res)=>{
				 this.replyVoList = res.data.data;
				 console.log(JSON.stringify(res));
			   })
			 },
			//关闭回复窗口
			onClose(){
				this.show = false;
			},
			// 发表评论
			insertLocalReply(){
				addLocalReply(this.localReviersId,this.localReplyText).then((res) =>{
				 console.log(JSON.stringify(res));
				  if(res.code == 500){
					Toast("评论失败");
				  }else{
					Toast("评论成功");
					this.huiFuSee(this.localReviersId);
					this.localReplyText = '';
					// this.reload();
				  }
				})
			},
			
		}
	}
</script>

<style>
	 .demo-preview{
	    padding: 1rem 1rem;
	    padding-bottom: 4rem;
	    text-align: left;
	  }
	  .demo-preview img {
	    -webkit-flex-shrink: 0;
	    flex-shrink: 0;
	    width: 2rem;
	    height: 2rem;
	    margin-right: 1rem;
	    float: left;
	  }
	  .demo-content{
		  margin-top: 20rpx;
	  }
	.demo-preview .demo-content h3{
		margin-left: 110rpx;
	    font-size: 0.95rem;
	    line-height: 1.25rem;
	  }
	  .demo-preview .demo-content p{
	    margin: 0.6rem 0 0;
	    line-height: 1.25rem;
	    font-size: 0.8rem;
	  }
	  .demo-preview .demo-contento .demo-contento-chat{
	    display: inline-block;
	    margin-right: 0.4rem;
	  }
	  .demo-preview .demo-contento .demo-contento-like{
	    display: inline-block;
	  }
	  .wrapper {
	    display: flex;
	    align-items: center;
	    justify-content:center;
	    height: 100%;
	    position: relative;
	    margin-bottom: 50px ;
	  }
	  .block {
	    width: 100%;
		height: 100%;
	    background-color: #fff;
	    bottom: 0;
	    position: absolute;
	    padding: 1rem 1rem 3.125rem 1rem;
	    overflow: auto;
	  }
	  .block .block-top{
	    padding-left: 1rem;
	    font-weight: 700;
	  }
	
	 .block-bottom{
		  width: 90%;
		  position: fixed;
		  z-index: 100;
		  bottom: 0rem;
		  background-color: #fff;
	  }
	
	  .block .block-list{
		padding-left:1rem;
		padding-top:1rem;
		font-size: 0.5rem;
		
	  }
	
	  .block .block-list .block-list-demo{
	    padding: 1rem 0;
	    position: relative;
	  }
	
	  .block .block-list .block-list-demo .block-list-demos{
	    margin-top: 0.5rem;
	    margin-left: 2.5rem;
	  }
	  .block .block-list .block-list-demo .block-list-demos .block-list-ademos{
	    padding-top: 0.5rem;
	  }
	  .block .block-list .block-list-demo .block-list-demos img{
	    width: 1rem;
	    height: 1rem;
	  }
	
	  .block .block-list .block-list-demo img{
	    flex-shrink: 0;
	    width: 2rem;
	    height: 2rem;
	    float: left;
	    margin: 0;
	  }
	  .block .block-list .list-demo-content{
	    margin-left: 0.5rem;
	    width: 70%;
	    display: inline-block;
	  }
	  .block .block-list .list-demo-content div{
	    padding-bottom: 0.5rem;
	  }
	  .block .block-list .list-demo-content div h3{
	    font-size: 0.75rem;
	  }
	  .block .block-list .list-demo-content div p{
	    font-size: 0.5rem;
	  }
	  .block .block-list .block-list-like{
	    display: inline-block;
	  }
	  .demo-contentImg{
	    display: inline-block;
	    margin: 0.07rem;
	  }
</style>
